<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  useGetUserAddressService,
  useCheckoutOrderService,
  useCommitOrderService
} from '@/api/requsets/index.js'
import { showToast } from 'vant'
import { useAddressStore, useShoppingCartStore } from '@/stores/index.js'

const router = useRouter()

const route = useRoute()

const addressStore = useAddressStore()

const cartStore = useShoppingCartStore()

// 用户地址列表
const addressList = ref([])

// 订单商品数据
const orderData = ref([])

onMounted(async () => {
  const {
    data: { list }
  } = await useGetUserAddressService()
  addressList.value = list

  if (route.query.mode === 'cart') {
    const { data } = await useCheckoutOrderService(route.query.mode, {
      cartIds: route.query.cartIds
    })
    orderData.value = data
    console.log('data', data, 'orderData', orderData.value)
  } else {
    const { data } = await useCheckoutOrderService(route.query.mode, {
      goodsId: route.query.goodsId,
      goodsSkuId: route.query.goodsSkuId,
      goodsNum: route.query.goodsNum
    })
    orderData.value = data
  }
})

// 用户留言
const message = ref('')

// 提交订单
const commitOrder = async () => {
  const mode = route.query.mode
  if (mode === 'cart') {
    await useCommitOrderService({
      mode,
      cartIds: route.query.cartIds,
      remark: message.value
    })
  } else {
    await useCommitOrderService({
      mode,
      goodsId: route.query.goodsId,
      goodsSkuId: route.query.goodsSkuId,
      goodsNum: route.query.goodsNum,
      remark: message.value
    })
  }
  await cartStore.handleDel()
  await router.push('order')
  showToast('支付成功')
}
</script>

<template>
  <div class="pay">
    <van-nav-bar title="订单结算台" left-arrow @click-left="$router.go(-1)" />
    <div class="address" @click="$router.push('/address')">
      <p>
        <van-icon name="logistics" style="margin-right: 10px" />
        <span>{{ addressStore.defAddressData || '请选择地址' }}</span>
      </p>
      <div>
        <van-icon
          name="arrow"
          style="transform: translateY(3px) translateX(20px)"
        />
      </div>
    </div>
    <div class="goods-list">
      <van-card
        v-for="item in orderData.order?.goodsList"
        :key="item.goods_id"
        class="goods-item"
        :num="item.total_num"
        :price="item.total_pay_price"
        :title="item.goods_name"
        :thumb="item.goods_image"
      />
      <div class="total">
        <p>
          共{{ orderData.order?.orderTotalNum }}件商品，合计:
          <span>￥{{ orderData.order?.orderTotalPrice }}</span>
        </p>
      </div>
    </div>
    <div class="commit-menu">
      <div class="top">
        <p>
          <span>订单总金额</span
          ><span style="color: red"
            >￥{{ orderData.order?.orderTotalPrice }}</span
          >
        </p>
        <p><span>优惠券</span><span>无优惠券可用</span></p>
        <p>
          <span>配送费用</span><span>￥{{ orderData.order?.pointsMoney }}</span>
        </p>
      </div>
      <div class="middle">
        <p>支付方式</p>
        <van-icon name="balance-o" />
        <span>余额支付(可用￥{{ orderData.personal?.balance }})</span>
        <van-icon
          name="passed"
          color="red"
          size="large"
          style="margin-left: 80px"
        />
      </div>
      <div class="bottom">
        <van-cell-group inset>
          <van-field
            v-model="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="选填:买家留言(50字内)"
            show-word-limit
            style="width: 100%"
          />
        </van-cell-group>
      </div>
    </div>
    <div class="footer">
      <p>
        实付款:<span>￥{{ orderData.order?.orderTotalPrice }}</span>
      </p>
      <div class="button" @click="commitOrder">提交订单</div>
    </div>
  </div>
</template>

<style lang="less">
.pay {
  position: relative;
  width: 100%;
  overflow: hidden;
  .address {
    width: 100%;
    padding: 0 20px;
    margin: auto;
    display: flex;
    // justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    width: 100vh;
    height: 58px;
    background: url('@/assets/border-line.png') bottom repeat-x;
    background-size: 60px;

    font-size: 14px;
    color: #666;
  }
  .goods-list {
    margin-top: 15px;
    .goods-item {
      background-color: transparent;

      .van-card__title {
        font-weight: normal !important;
        font-size: 14px !important;
      }
      .van-card__price {
        color: red;
      }
    }
    .total {
      margin-top: 10px;
      transform: translateX(150px);
      p {
        font-size: 16px;
        span {
          //font-size: 16px;
          color: red;
        }
      }
    }
  }
  .commit-menu {
    margin-top: 15px;

    .top,
    .middle {
      padding: 10px 10px;
    }

    .top {
      display: flex;
      flex-direction: column;
      border-top: 1px solid #efefef;
      border-bottom: 1px solid #efefef;
      p {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        &:nth-child(2) {
          margin: 10px 0;
        }
      }
    }
    .middle {
      padding: 10px 10px;
      border-bottom: 1px solid #efefef;

      p:first-child {
        margin-bottom: 15px;
      }
    }
    .bottom {
      margin-bottom: 46px;
    }
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    padding: 20px 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-top: 2px solid #efefef;
    p {
      span {
        color: red;
      }
    }

    .button {
      height: 45px;
      width: 120px;
      text-align: center;
      line-height: 40px;
      background: linear-gradient(90deg, #f9211c, #ff6335);
      color: white;
      font-size: 14px;
    }
  }
}
</style>
